<div class="layui-card">
    <div class="layui-card-header">
        <h2 class="header-title">小组管理</h2>
        <span class="layui-breadcrumb pull-right">
          <a href="#!console">首页</a>
          <a><cite>小组管理</cite></a>
        </span>
    </div>
    <div class="layui-card-body">
        <div class="layui-form toolbar">
            <input id="group-search-value" class="layui-input search-input" type="text" placeholder="输入小组名称"/>&emsp;
            <button id="group-btn-search" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button id="group-btn-add" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加小组</button>
            <button id="test" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>测试</button>
        </div>

        <table class="layui-table" id="group-table" lay-filter="group-table"></table>
    </div>
</div>


<!-- 表格操作列 -->
<script type="text/html" id="group-table-bar">
    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="check">
        <i class="layui-icon">&#xe770;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="update">
        <i class="layui-icon">&#xe642;</i>
    </button>
    <button type="button" class="layui-btn layui-btn-xs layui-btn-primary" lay-event="delete">
        <i class="layui-icon">&#xe640;</i>
    </button>
</script>

<!-- 表格状态列 -->
<script type="text/html" id="groups-tpl-state">
    <input type="checkbox" lay-filter="groups-tpl-state" value="{{d.grouid}}" lay-skin="switch" lay-text="学习中|已毕业"
           {{d.gptype==0?'checked':''}}/>
</script>

<script>
    layui.use(['form', 'index','table', 'util', 'config', 'admin', 'layer'], function () {
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var layer = layui.layer;
        var util = layui.util;
        var admin = layui.admin;
        var index = layui.index;
        var layer = layui.layer;

        var login_user
        // 获取当前用户信息
        index.getUser(function (user) {
            login_user = user;
            console.log(login_user)
        });



        // 渲染表格
        table.render({
            elem: '#group-table',
            // url: config.base_server + 'user_query.json',
            url: config.base_server + 'api-user/group/getGroupByTeacher'+'?access_token='+config.getToken().access_token+'&teacid='+login_user.id,
            method: 'post',
            where: {
                // access_token: config.getToken().access_token
            },
            page: true,
            cols: [[
                {type: 'numbers'},
                {field: 'grouid', sort: true, title: 'id'},
                {field: 'gpname', sort: true, title: '小组名称'},
                {field: 'teaname', sort: true, title: '班主任姓名'},
                {field: 'number', sort: true, title: '小组人数'},
                {field: 'gptype', sort: true, templet: '#groups-tpl-state', title: '状态'},
                {
                    sort: true, templet: function (d) {
                        return util.toDateString(d.cretim);
                    }, title: '创建时间'
                },
                {
                    sort: true, templet: function (d) {
                        return util.toDateString(d.updtim);
                    }, title: '修改时间'
                },
                {align: 'center', toolbar: '#group-table-bar', title: '操作',width: 150}
            ]]
        });



        // 搜索按钮点击事件
        $('#group-btn-search').click(function () {
            var value = $('#group-search-value').val();
            table.reload('group-table', {where: {searchKey: value}});
        });

        // 添加按钮点击事件
        $('#group-btn-add').click(function () {
            showAddModel();
        });

        // 测试
        $('#test').click(function () {

            var title = '小组人员分配测试';
            admin.popupCenter({
                title: title,
                area:  ['1300px', '700px'],
                path: 'pages/system/teacherCheck_form1.html',
                finish: function () {
                    table.reload('group-table', {});
                }
            });
        });

        //显示表单弹窗
        var showAddModel = function (data) {
            admin.putTempData('groupData', data);
            var title = data ? '修改小组信息':'添加小组';
            admin.popupCenter({
                title: title,
                path: 'pages/system/teacherGroup_form.html',
                finish: function () {
                    table.reload('group-table', {});
                }
            });
        };

        // 修改group状态
        form.on('switch(groups-tpl-state)', function (obj) {
            layer.load(2);
            admin.req('api-user/group/updateGroupType', {
                id: obj.elem.value,
                gptype: obj.elem.checked ? 0 : 1,
                access_token: config.getToken().access_token
            }, function (data) {
                layer.closeAll('loading');
                if (data.code == 0) {
                    layer.msg(data.msg, {icon: 1, time: 500});
                } else {
                    layer.msg(data.msg, {icon: 2, time: 500});
                    $(obj.elem).prop('checked', !obj.elem.checked);
                    form.render('checkbox');
                }
            }, 'GET');
        });

        // 工具条点击事件
        table.on('tool(group-table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;

            if (layEvent === 'delete') { // 删除
                console.log(obj.data)
                if (obj.data.number != 0){
                    layer.open({
                        title: '警告'
                        ,content: '该小组还有成员，不能删除！！！'
                        ,btn:   '我知道了'
                    });
                }else{
                    layer.confirm('确定删除该小组吗？', function (i) {
                        layer.close(i);
                        layer.load(2);
                        admin.req('api-user/group/deleteGroupById', {
                            id:obj.data.grouid
                        }, function (data) {
                            layer.closeAll('loading');
                            if (data.code == 0) {
                                layer.msg(data.msg, {icon: 1, time: 500});
                                table.reload('group-table', {});
                            } else {
                                layer.msg(data.msg, {icon: 2, time: 500});
                            }
                        }, 'GET');
                    });
                }
            } else if (layEvent === 'check') { // 小组人员分配
                showCheckModel(obj.data);
            }
            else if (layEvent === 'update') { // 小组信息修改
                showAddModel(obj.data);
            }
        });

        //显示人员修改弹窗
        var showCheckModel = function (data) {
            admin.putTempData('groupData', data);
            var title = '小组人员分配';
            admin.popupCenter({
                title: title,
                area:  ['700px', '400px'],
                path: 'pages/system/teacherCheck_form.html',
                finish: function () {
                    table.reload('group-table', {});
                }
            });
        };
    });
</script>